<template>
  <div>
      <h1>当前求和为：{{$store.state.num}}</h1>
      <select v-model.number="addNumTotal">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="addNum">+</button>
      <button @click="cutNum">-</button>
      <button @click="oddAddNum">当前和为奇数再加</button>
      <button @click="waitAddNum">等一等再加</button>
  </div>
</template>

<script>
export default {
    data(){
    return {
      addNumTotal:1,
    }
  },
  components:{
      
  },
  methods: {
    // addNum不是复杂的行为，可以直接越过dispatch()到actions这一环，直接通过commit()来改变state
    addNum(){
      // 直接commit 越过了actions的dispatch这一环
     this.$store.commit('ADD',this.addNumTotal);
    },
    cutNum(){
     this.$store.commit('CUT',this.addNumTotal);
    },
    oddAddNum(){
     this.$store.dispatch('oddAdd',this.addNumTotal);
    },
    waitAddNum(){
      this.$store.dispatch('addWait',this.addNumTotal);
    }
  },
  mounted() {
    console.log('Count',this);
  },
}
</script>

<style scoped>
 
</style>